<template>
  <div class="container">
    <!-- 系统设置/员工管理 -->
    <!-- 查询条件 -->
    <el-form :inline="true" class="tableSearchBox" size="medium">
      <el-form-item >
        <el-button type="primary" class="el-icon-plus">新增部门</el-button>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" class="el-icon-plus">新增员工</el-button>
      </el-form-item>
    
    </el-form>
    <!-- /查询条件 -->

    <el-container>
      <el-container>
        <el-aside width="250px">
          <el-tree style="min-height:300px;" class="leftTree" :data="treeData" highlight-current :props="defaultProps"
            @node-click="handleTreeNodeClick"></el-tree>
        </el-aside>
        <el-container>
          <el-main>
            <PagesTable :tableHeader="tableHeader" :tableData="tableData" :tableOperation="tableOperation"
              :tablePagination="tablePagination" />
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import XLSX from 'xlsx';
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable
    },
    data() {
      return {
        
        tableHeader: [{
            name: "序号",
            mark: "id",
            minWidth: "90"
          },
          {
            name: "用户编号",
            mark: "number",
            minWidth: "90"
          },
          {
            name: "用户姓名",
            mark: "name",
            minWidth: "90"
          },
          {
            name: "联系方式",
            mark: "name",
            minWidth: "90"
          },
          {
            name: "部门",
            mark: "name",
            minWidth: "90"
          },
          {
            name: "角色",
            mark: "name",
            minWidth: "90"
          },
          {
            name: "状态",
            mark: "name",
            minWidth: "90"
          },
          {
            name: "操作",
            mark: "",
            minWidth: "90"
          },
        ],
        tableOperation: [{
            name: "修改",
            mark: "edit",
            icon: true
          },
          {
            name: "停用",
            mark: "close",
            icon: true
          },],
        tablePagination: {
          show: true,
          current: 1,
          size: 10,
          total: 1
        },
        tableData: [],
        tableDataAll: [],
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        

      }
    },
    mounted() {
    },
    beforeDestroy() {},
    async created() {
      this.getTreeData()
    },
    methods: {
      handleTreeNodeClick(data) {
        console.log(data);
        this.getData();
      },
      
      async getTreeData() { //树结构
        const self = this;
        self.treeData = [{id:"0",label:"维修部"},{id:"1",label:"营业部"}]
      },
      getData() {

      },

    }
  }

</script>
<style lang="scss" scoped>

</style>
